<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>最佳拍档</title>

    <meta name="keywords" content="最佳拍档">
    <meta name="description" content="最佳拍档">
<!--    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">-->
<!--    <link rel="stylesheet" type="text/css" th:href="@{/common/admin/css/style.css}">-->
<!--    <script th:src="@{/layui/layui.js}" src="/layui/layui.js"></script>-->
<!--    <script th:src="@{/common/js/jquery-3.3.1.min.js}" src="/common/js/jquery-3.3.1.min.js"></script>-->
<!--    <script th:src="@{/common/js/vue.min.js}" src="/common/js/vue.min.js"></script>-->
    <style>
        .right h2{
            margin: 10px 0;
        }
        .right li{
            margin-bottom: 10px;
        }
        #myIframe1 {
            position: relative;
            padding-left: 0px;
            padding-top: 0px;
            height: 600px;
        }
        #myIframe2 {
            position: relative;
            padding-left: 0px;
            padding-top: 0px;
            height: 600px;
        }
    </style>
</head>
<body>
<div class="right p20" style="margin-left: 200px;">
    <input type="hidden" id="userId" th:value="${loginUser.userid}">
    <blockquote class="layui-elem-quote">
        <h2>欢迎您进入最佳拍档CRM管理平台</h2>
        <p>如果您看到本页面，您将作为CRM管理平台的记录管理员，需要处理以下工作：</p>
        <p>1、定时查看和管理记录，将长期未更新或需要调整的资源做回收处理；</p>
        <p>2、对回收的资源或暂时没人维护的资源做重新分配处理。</p>
        <p>其它：您可以在搜索框内输入关键字检索相关的资源或记录。</p>
    </blockquote>
    <div class="layui-tab" lay-filter="sales" lay-allowClose="true">
        <ul class="layui-tab-title">
            <li class="layui-this">销售详情</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div style="display: flex;justify-content: space-between">
                    <div style="display: flex">
<!--                        <div th:if="${userRole.indexOf('salesManage') != -1}">-->
<!--                            <button type="button" class="layui-btn" th:onclick="toAddSale()">-->
<!--                                <i class="layui-icon">&#xe624;</i>新增-->
<!--                            </button>-->
<!--                        </div>-->
                    </div>
                    <div style="display: flex;padding-right: 20px;">
                        <div style="width: 250px;">
                            <input type="text" name="keyword" id="keyword" required lay-verify="required" placeholder="请输入关键字" autocomplete="off" class="layui-input" onkeydown="keydownSearch()">
                        </div>
                        <div style="padding-left: 5px;">
                            <button type="button" class="layui-btn" onclick="search()">搜索</button>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md12" style="padding-right: 20px">

                        <table class="layui-table layui-form" lay-filter="EditListTable" id="EditListTable" lay-data="{id: 'tableid'}">
                            <thead>
                            <tr class="id36567">
                                <th lay-data="{checkbox:true}"></th>
                                <th lay-data="{field:'openeaId', align: 'center'}">平台ID</th>
                                <th lay-data="{field:'userName', align: 'center'}">姓名</th>
                                <th lay-data="{field:'phone', align: 'center'}">手机</th>
                                <th lay-data="{field:'education', align: 'center'}">学历</th>
                                <th lay-data="{field:'age', align: 'center'}">年龄</th>
                                <th lay-data="{field:'post', align: 'center'}">销售岗位</th>
                                <th lay-data="{field:'entryTime', align: 'center'}">入职日期</th>
                                <th lay-data="{field:'assistantName', align: 'center'}">当前助理</th>
                                <th lay-data="{fixed: 'right', toolbar: '#barDemo', width: 200, align: 'center'}">操作</th>
                            </tr>
                            </thead>
                        </table>
                        <script type="text/html" id="barDemo">
                            <a class="layui-btn layui-btn-xs" lay-event="details">详情</a>
                            <a class="layui-btn layui-btn-xs" lay-event="associated_customers">关联客户</a>
                            {{# if(d.syncStatus == 0){ }}
                                <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="registration_code">注册码</a>
                            {{# } }}
                        </script>
                        <!-- 头部工具栏 -->
                        <script type="text/html" id="toolbar">
                            <div class="layui-btn-container">
                                <button class="layui-btn layui-btn-sm" lay-event="add" th:if="${userRole.indexOf('salesManage') != -1}"><i class="layui-icon">&#xe624;</i>新增</button>
                                <button class="layui-btn layui-btn-sm" lay-event="assign" th:if="${userRole.indexOf('deptManage') != -1}"><i class="layui-icon">&#xe609;</i>指派助理</button>
                                <button class="layui-btn layui-btn-sm" lay-event="employ" th:if="${userRole.indexOf('deptManage') != -1}"><i class="layui-icon">&#xe612;</i>聘为助理</button>
                            </div>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--用户选择弹窗-->
    <div id="layer-chooseSchool" lay-filter="chooseSchool-filter" style="display: none;width: 590px;height: 380px;margin: 0 auto;">
        <div style="display: flex;justify-content: space-between;padding-top: 10px;">
            <div></div>
            <div style="display: flex;">
                <div style="width: 250px;">
                    <input type="text" name="user_keyword" id="user_keyword" placeholder="请输入关键字" autocomplete="off" class="layui-input" onkeydown="userKeydownSearch()">
                </div>
                <div style="padding-left: 5px;">
                    <button type="button" class="layui-btn" onclick="userSearch()">搜索</button>
                </div>
            </div>
        </div>
        <table class="layui-table layui-form" lay-filter="schoolResult-filter" id="schoolResult" lay-data="{id: 'schoolResult'}" style="display: none;">
            <thead>
            <tr class="id36567">
                <th lay-data="{checkbox:true}"></th>
                <th lay-data="{field:'salesId', width: '268', align: 'center'}">助理ID</th>
                <th lay-data="{field:'userName', width: '268', align: 'center'}">助理昵称</th>
            </tr>
            </thead>
        </table>
    </div>

</div>
</body>

<script type="text/javascript">

    layui.use(['element'], function () {
        let element = layui.element;
    })

    function add_tab(openeaId){
        layui.use(['element'], function () {
            let element = layui.element;
            element.tabDelete('sales', '1');
            element.tabDelete('sales', '2');
            element.tabAdd('sales', {
                title: '重点品牌'
                ,content: '<iframe id="myIframe1" src="/Fragment/Tab/CollectionBrand?userId='+openeaId+'" height="100%"  width="100%" scrolling="yes" frameborder="0"></iframe>' //支持传入html
                ,id: '1'
            });
            element.tabAdd('sales', {
                title: '重点团长'
                ,content: '<iframe id="myIframe2" src="/Fragment/Tab/CollectionGroupPurchase?userId='+openeaId+'" height="100%"  width="100%" scrolling="yes" frameborder="0"></iframe>' //支持传入html
                ,id: '2'
            });
            element.tabChange('sales', '1');
        })
    }

    //从收藏的品牌中查看品牌详情
    function add_tab_brand(unid){
        layui.use(['element'], function () {
            let element = layui.element;
            element.tabDelete('sales', '3');
            element.tabAdd('sales', {
                title: '品牌详情'
                ,content: '<iframe id="myIframe1" src="/Fragment/Tab/BrandDetailsReadonly?unid='+unid+'" height="100%"  width="100%" scrolling="yes" frameborder="0"></iframe>' //支持传入html
                ,id: '3'
            });
            element.tabChange('sales', '3');
        })
    }

    layui.use(['table', 'layer'], function () {//layui 模块引用，根据需要自行修改
        let layer = layui.layer, table = layui.table;
        //加载列表的后端 url
        var getListUrl = '/sales/list';
        //对于任意一个 table，按照官方的说法，有三种不同的初始化渲染方式，不多介绍，而这里使用的方式姑且看做第三种：转换静态表格 方式
        //转换静态表格方式，自然首先需要有一个已经存在的表格，然后再通过 js 方式转化为 Layui 表格
        //无论哪种方式的 Layui table 初始化自然需要配置项
        //通过转化的方式初始化 Layui table，配置项部分可以在 源table中，部分在js中，源 table 的源代码上文已经给出，下面给出一个示例的 js 中的配置项
        var tableOptions = {
            elem: '#EditListTable',
            url: getListUrl, //请求地址
            method: 'POST', //方式
            id: 'EditListTable', //生成 Layui table 的标识 id，必须提供，用于后文刷新操作，笔者该处出过问题
            page: true, //是否分页
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            where: { }, //请求后端接口的条件，该处就是条件错误点，按照官方给出的代码示例，原先写成了 where: { key : { type: "all" } }，结果并不是我想的那样，如此写，key 将是后端的一个类作为参数，里面有 type 属性，如果误以为 key 是 Layui 提供的格式，那就大错特错了
            response: { //定义后端 json 格式，详细参见官方文档
                statusName: 'code', //状态字段名称
                statusCode: '200', //状态字段成功值
                msgName: 'msg', //消息字段
                countName: 'total', //总数字段
                dataName: 'rows' //数据字段
            },
            limit: 10,//每页显示条数
            limits: [10,20,50,100,150,200,300],//可选择范围
            defaultToolbar: ['filter'],
            toolbar: '#toolbar'
        };
        // 表初始化
        var createTable = function () {
            table.init('EditListTable', tableOptions);// table lay-filter
        };
        // 表刷新方法
        var reloadTable = function (item) {
            table.reload("tableid", { //此处是上文提到的 初始化标识id
                url: '/sales/list',
                where: {}
            });
        };
        // 表初始化
        createTable();

        //监听行工具事件
        table.on('tool(EditListTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'details') {
                window.location.href = "http://" + window.location.host + "/Admin/Sales/EditSalesInfo?salesId="+data.salesId;
            }else if(obj.event === 'associated_customers'){
                add_tab(data.openeaId);
            }else if(obj.event === 'registration_code'){//生成注册码
                create_registration_code(data.salesId);
            }
        });

        //头部工具栏按钮触发事件
        table.on('toolbar(EditListTable)', function(obj) {
            //获取选中行
            let toolbar = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    toAddSale();
                break;
                case 'assign':
                    if(toolbar.data.length > 0){
                        layer.open({
                            type: 1,
                            title: '选择人员',
                            skin: 'layui-layer-skin', //样式类名
                            area: ['650px', '450px'],
                            closeBtn: 0,
                            id: "chooseSchool",
                            content: $("#layer-chooseSchool"),
                            //层弹出后的成功回调方法
                            success: function(index, layero){
                                initUserTable();
                            },
                            btn: ['确认', '取消'],
                            //按钮居中显示
                            btnAlign:'c',
                            //确认按钮事件
                            yes : function(index, layero) {
                                //获取选中行的数据
                                var checkStatus = table.checkStatus('schoolResult');
                                var datas = checkStatus.data;
                                if(datas.length == 1){
                                    let seletedUser = datas[0];
                                    let selectedUser = seletedUser.salesId;
                                    let selectedUserName = seletedUser.userName;
                                    layer.confirm('确定指派给'+selectedUserName+'吗？', function (index) {
                                        for (let i=0; i<toolbar.data.length; i++){
                                            toolbar.data[i].assignId = toolbar.data[i].salesId
                                            toolbar.data[i].userId = selectedUser
                                            toolbar.data[i].userName = selectedUserName
                                        }
                                        $.ajax({
                                            url: '/sales/assign',
                                            type: 'post',
                                            data: JSON.stringify(toolbar.data),
                                            dataType: 'json', // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
                                            contentType: 'application/json; charset=UTF-8',
                                            success: function (res) {
                                                layer.msg('已成功指派给了'+selectedUserName);
                                                setTimeout(function () {
                                                    layer.closeAll();
                                                    reloadTable();
                                                },2000)
                                            },
                                            error:function(e){
                                                layer.msg('出错啦！');
                                                setTimeout(function () {
                                                    layer.closeAll();
                                                },2000)
                                            }
                                        });
                                        layer.close( index);
                                        $("#layer-chooseSchool").css("display","none");
                                    });
                                }else if(datas.length == 0){
                                    layer.msg('请选择一个用户进行指派!');
                                }else if(datas.length > 1){
                                    layer.msg('只能选择一个用户进行指派!');
                                }
                            },
                            //取消按钮事件
                            btn2:function(){
                                $("#layer-chooseSchool").css("display","none");
                            }
                        });
                    }else{
                        layer.msg("请至少选中一项");
                    }
                break;
                case 'employ':
                    if(toolbar.data.length > 0){
                        let unids = [];
                        for (let i=0; i<toolbar.data.length; i++){
                            unids.push(toolbar.data[i].salesId);
                        }
                        layer.confirm('确定将选中的销售聘为助理吗？', function (index) {
                            $.ajax({
                                url: '/sales/hired',
                                type: 'post',
                                data: JSON.stringify(unids),
                                contentType: 'application/json',
                                dataType: 'json', // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
                                success: function (res) {
                                    layui.use('layer', function(){
                                        var layer = layui.layer;
                                        layer.msg(res.msg);
                                    });
                                    //两秒后重载表格数据
                                    setTimeout(function(){
                                        reloadTable();
                                    }, 2000);
                                }
                            });
                            layer.close(index);
                        });
                    }else{
                        layer.msg("请至少选中一项");
                    }
                break;
            }
        })

    });

    //搜索
    function search(){
        layui.use(['table', 'layer'], function () {//layui 模块引用，根据需要自行修改
            let layer = layui.layer, table = layui.table;
            table.reload('tableid', {
                where: {
                    searchStr:$("#keyword").val()
                }
                ,page: {
                    pageNum: 1 //重新从第 1 页开始
                }
            });
        })
    }

    //回车搜索
    function keydownSearch() {
        let event = window.event || arguments.callee.caller.arguments[0];
        if (event.keyCode == 13)
        {
            search();
        }
    }

    //添加销售信息
    function toAddSale() {
        window.location.href = "http://" + window.location.host + "/Admin/Sales/EditSalesInfo";
    }

    //用户搜索
    function userSearch(){
        layui.use(['table', 'layer'], function () {//layui 模块引用，根据需要自行修改
            let layer = layui.layer, table = layui.table;
            table.reload('schoolResult', {
                where: {
                    searchStr:$("#user_keyword").val()
                }
                ,page: {
                    pageNum: 1 //重新从第 1 页开始
                }
            });
        })
    }

    //用户回车搜索
    function userKeydownSearch() {
        let event = window.event || arguments.callee.caller.arguments[0];
        if (event.keyCode == 13)
        {
            userSearch();
        }
    }

    //渲染可选择人员表格
    function initUserTable() {
        layui.use(['table', 'layer'], function () {//layui 模块引用，根据需要自行修改
            let layer = layui.layer, table = layui.table;
            //加载列表的后端 url
            var getListUrl = '/sales/assistant/list';
            var tableOptions = {
                elem: '#schoolResult',
                url: getListUrl, //请求地址
                method: 'POST', //方式
                id: 'schoolResult', //生成 Layui table 的标识 id，必须提供，用于后文刷新操作，笔者该处出过问题
                page: true, //是否分页
                limits: [5],
                limit: 5, //每页默认显示的数量
                request: {
                    pageName: 'pageNum',
                    limitName: 'pageSize'
                },
                where: { type: "all" }, //请求后端接口的条件，该处就是条件错误点，按照官方给出的代码示例，原先写成了 where: { key : { type: "all" } }，结果并不是我想的那样，如此写，key 将是后端的一个类作为参数，里面有 type 属性，如果误以为 key 是 Layui 提供的格式，那就大错特错了
                response: { //定义后端 json 格式，详细参见官方文档
                    statusName: 'code', //状态字段名称
                    statusCode: '200', //状态字段成功值
                    msgName: 'msg', //消息字段
                    countName: 'total', //总数字段
                    dataName: 'rows' //数据字段
                }
            };
            // 表初始化
            var createTable = function () {
                table.init('schoolResult-filter', tableOptions);// table lay-filter
            };

            // 表初始化
            createTable();

        });
    }

    //生成注册码
    function create_registration_code(salesId){
        layui.use(['layer'], function () {//layui 模块引用，根据需要自行修改
            let layer = layui.layer;
            let loading = layer.msg("加载中...",{
                icon:16,
                time:-1
            })
            let param = {
                id: salesId,
                type: "crm",
                url: "pages_tabbar_contact/common_contact/guide"
            }
            $.ajax({
                url: '/qr/sales',
                type: 'post',
                data: JSON.stringify(param),
                dataType: 'json', // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
                contentType: 'application/json; charset=UTF-8',
                success: function (res) {
                    layer.close(loading);
                    let html="<div style='text-align: center;padding-top: 10px;'><img style='height: 250px;width: 250px;' src='"+res.weburi+"?t=" + Math.random()+"'></div><div style='padding-top: 20px;text-align: center;'>请使用微信扫码进行绑定</div>";
                    layer.open({
                        type : 1,
                        title : '注册码',
                        area: ['300px','420px'],
                        shade: 0,
                        shadeClose : true,
                        content : html,
                        btn:['下载图片','取消'],
                        btn1: function(index) {
                            let a = document.createElement('a');
                            let event = new MouseEvent('click');
                            a.download = "分享注册码";
                            a.href = res.weburi;
                            a.dispatchEvent(event);
                        },
                        btn2: function(index){
                            layer.close(index);
                        }
                    });
                },
                error:function(e){
                    layer.close(loading);
                    layer.msg('出错啦！');
                    setTimeout(function () {
                        layer.closeAll();
                    },2000)
                }
            });
        })
    }

    //初始化导航栏选中
    window.onload=function(){
        let url = window.location.pathname;
        if(url=="/" || url=="/Admin"){

        }else{
            $('a[href="'+url+'"]').parent().addClass('layui-this');
            $('a[href="'+url+'"]').parent().parent().parent().addClass('layui-nav-itemed');
        }
    }

</script>

</html>